<template>
    <view class="uni-container">
			<view v-if="!pageLoading && tag === 1">
				<view class="top-warp">
					<view class="inputs">
						<view class="list">
								
						</view>
						<view class="seach">
								
						</view>
						<input type="text" class="input" placeholder="搜索你感兴趣的内容" />
						<view class="aq">
								 
						</view>
						<view class="text-text">
								安全结算 &nbsp;&nbsp;极速变现 &nbsp;&nbsp;安全无忧 &nbsp;&nbsp;口碑保证 
						</view>
					</view>
					<metabs v-model="tabIndex" :tabs="tabs" :height='92'   bgColor='#fff'  :tab-width="130" :coupon='true' :borderNone="false"></metabs>
				</view>
				<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
					<swiper-item v-for="(tab,i) in tabs" :key="i">
						<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex"  :tabs="tabs" :height="height" :jifen='jifen'></mescroll-item>
					</swiper-item>
				</swiper>
			</view>
    </view>
</template>

<script>
	import Skeleton from "@/components/J-skeleton/J-skeleton.vue"
	import lsLoading from '@/components/ls-loading/ls-loading.vue';
	import metabs from '@/components/me-tabs/me-tabs.vue'
	import MescrollItem from "./components/mescroll-swiper-item.vue";
	import * as couponApi from '@/api/goods'
	export default {
		components: {
			lsLoading,
			Skeleton,
			metabs,
			MescrollItem
		},
		data() {
			return {
				huafei: [],
				jifen: [], 
				Height: 0,
				// 俩个list 长度要一致
				ss: "",
				pageLoading: true, 
				loading: true,
				skeleton1 : {
					avatarSize: '52px',
					row: 0,
					showTitle: true,
					titleWidth:'80%'
				},
				tag:0,
				yemian:"",
				name:"团团收",
				height: "", // 需要固定swiper的高度
				tabs: [],
				tabIndex: 0 ,// 当前tab的下标
			}
		},
		onLoad() {
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(64) + 'px'
			this.getCategoryList()
		},
		onShow() {
			let yemian = Number(uni.getStorageSync('yemian'))
			if(yemian){
				this.$nextTick(() => {
					if(yemian === 15){
						yemian = 0
					}
					this.tabIndex = yemian
					uni.removeStorageSync("yemian")
				})

			}
			
			// #ifdef MP-QQ
			qq.showShareMenu({
			  showShareItems: ['qq', 'qzone', 'wechatFriends', 'wechatMoment']
			})
			// #endif
		},
		methods: {
			// 卡卷分类展示
			getCategoryList() {
				let token = uni.getStorageSync("AccessToken")
				let _this = this
				let t = ""
				let s = null
				// #ifdef MP-TOUTIAO
				t = 2
				// #endif
				// #ifdef APP-PLUS
				t = this.$fxLink.checkAppSource()
				// #endif
				// #ifdef MP-ALIPAY
				s = 1
				// #endif
				couponApi.list({
					wxapp_id: _this.$wxapp_id,
					type: 2,
					token:token,
					t,
					s
				}).then(res => {
					let list_f = res.data
					let dList = []
					for (let i = 0; i < list_f.length; i++) {
						this.tabs.push({"name":list_f[i].name})
						dList = list_f[i].card 
						for(let j=0;j<dList.length;j++){
							if((j + 1) % 1 === 0){
								dList[j]['new_class'] = 'bjion2'
							}
							if((j + 1) % 2 === 0){
								dList[j]['new_class'] = 'bjion3'
							}
							if((j + 1) % 3 === 0){
								dList[j]['new_class'] = 'bjion4'
							}
							if((j + 1) % 4 === 0){
								dList[j]['new_class'] = 'bjion5'
							}
						}
						this.jifen.push({
							'list': dList
						})
					}
					let yemian = Number(uni.getStorageSync('yemian'))
					if(yemian){
						this.tabIndex = yemian
						if (yemian === 15) {
							this.tabIndex = 0
						}
						uni.removeStorageSync("yemian")
					}
					this.tag = 1
					this.pageLoading = false
				})
			},
			// 轮播菜单
			swiperChange(e){
				this.tabIndex = e.detail.current
			},
			search() {
				if (this.ss) {
					uni.navigateTo({
						url:"/pages/search/index?search="+ this.ss
					})
					this.ss=''
				} else {
					this.$toast("请输入搜索内容")
				}
			},
		}
	}
</script>
</script>

<style lang="scss">
	.top-warp{
		z-index: 9990;
		position: fixed;
		top: --window-top; /* css变量 */
		left: 0;
		width: 100%;
		height: 200rpx!important;
		// background-color: #F5F7FA;
	}
	.inputs{
	        height: 120rpx;
	        padding: 0 24rpx;
	        position: relative;
	        overflow: hidden;
	        .list{
	            position: absolute;
	            left:24rpx;
	            top: 0;
	            width: 95%;
	             height: 120rpx;
	             background: url('/static/list.png') no-repeat;
	             background-size:100% 120rpx ;
	        }
	        .seach{
	             position: absolute;
	             left: 36rpx;
	             top: 24rpx;
	             width: 35rpx;
	             height: 35rpx;
	             background-image: url('/static/seach.png');
	             background-size:35rpx 35rpx ;
	        }
	        .aq{
	            position: absolute;
	            left: 0;
	            top: 78rpx;
	            width: 100%;
	            height: 250rpx;
	            background-image: url('/static/aq.png');
	            background-size:100% 250rpx ;
	        }
	        .input{
	            margin-left: 48rpx;
	           height: 80rpx;
	            padding: 0;
	        }
	        .text-text{
	            width: 50%;
	            top: 10rpx;
	            left: 70rpx;
	            position: relative;
	            font-family: PingFang SC, PingFang SC;
	            font-weight: 400;
	            font-size: 14rpx;
	            color: #94A7BF;
	            line-height: 16rpx;
	            text-align: left;
	            font-style: normal;
	            text-transform: none;
	        }
	    }
</style>
